import {popup} from './popup'
import excel from './excel'
import core from '@/core/'

/**
 * 自定义对话框的参数模板
 */
const dialogInfo =  {
	title: '操作提示', // 标题
	content: '', // 内容。如果是输入框，就是输入框的内容
	editable: false, // 是否显示输入框
	placeholderText: '请输入内容', // 输入框的占位文字
	typeDetail: 'text', // 输入框的样式
	required: true, // 是否要求必填。默认必填。也可以是字符串，表示如果没有值提示的文本
	showCancel: true, // 是否显示取消按钮
	confirmColor: 'cornflowerblue', // 确认文字颜色。H5平台默认为"#007aff"，微信小程序平台默认为"#576B95"，百度小程序平台默认为"#3c76ff"
	cancelColor: '#333', // 取消文字颜色
	cancelText: '取消', // 取消按钮文字
	confirmText: '确定', // 确认按钮文字
	success: res => {},
	fail: () => {},
	complete: () => {},
	
	// 上述为系统自带的属性。下面为自定义可新增的属性
	type: 'modal',  // 对话框类型。modal类型和actionSheet类型
	kind: '', // 弹出类型。默认 type ='modal'是center；type = 'actionSheet'是bottom
	custom: true, // 是否显示自定义的对话框
	subTitle: '', // 副标题。有副标题就会像一般dialog一样。没有副标题就会像系统dialog
	showClose: '', // 是否显示右上角的关闭
	closeText: '', // 右上角的关闭文字
	closeIcon: 'close', // 右上角的关闭图标，默认
	text: '', // 与内容并列的文字。考虑到是editable模式下没有内容文字的属性
	qrcode: false, // 是否显示未二维码内容。如果为true，content则将转化为二维码显示
	remark: '', // 比内容字号小两号的文字
	centerText: '', // 中间按钮文字。有则显示，无则不显示
	centerColor: '#666', // 中间按钮文字颜色
	headerStyle: {}, // 自定义header的样式
	alertStyle: {
		color: 'red',
		fontSize: 'x-small',
		marginTop: '5px'
	}, // 自定义alert的样式
	textStyle: {
		color: '#666',
		fontSize: 'initial',
		marginTop: '5px'
	}, // 自定义text的样式
	contentStyle: {
		color: '#666',
		fontSize: 'initial',
		marginTop: '5px'
	}, // 自定义content的样式
	remarkStyle: {
		color: '#999',
		fontSize: 'x-small',
		marginTop: '5px'
	}, // 自定义remark的样式
	awaitRes: false, // 是否等待结果再关闭
	onText: type => {
		// 点击文本时的回调函数
	},
	
	// editable为true时生效。默认是一个输入框。uforms对contentStyle也生效
	modelOptions: undefined, // 可编辑的表单内容
	modelValue: undefined, // 默认值
	modelRules: undefined, // 校验规则。点击最右边的按钮时校验
	labelWidth: undefined, // 文本标签的宽度。需加单位px
	
	// 下面为showActionSheet所特有
	alert: '', // 警示文案
	itemList: [], // 按钮文字数组
	itemNameKey: '', // 按钮文字数组的标题映射Key。如果itemList的元素是对象的话
	itemColorKey: '', // 按钮文字数组的颜色映射Key。如果itemList的元素是对象的话，优先级大于itemColor
	itemColor: '#333', // 按钮文字颜色。如果是数组，表示itemList对应的颜色；如果是字符串表示itemList一样的颜色
	
	excel: { // modal下导出表格模式
		...excel,
		show: false, // 是否是导出表格模式
	},
	
	customVue: undefined, // 自定义的vue组件。
		/**
		 * 如果报错runtime-only。请参考babel.config.js的配置
		 * 1，npm install @vue/babel-plugin-jsx --save-dev；
		 * 2，新建babel.config.js：
		 * module.exports = {
				"presets": [
					"@vue/cli-plugin-babel/preset"
				],
				"plugins": [
					"@vue/babel-plugin-jsx"
				]
			}
		 */
		// {
		// 	render() {
		// 		return (
		// 			<view>
		// 				{jidiList.map((item, index) => (
		// 					<div key={index} style="display: flex;align-items: center;justify-content: space-between;">
		// 						<div>{item.name}</div>
		// 						<button onClick={() => this.handleClick(item)}>点击我</button>
		// 					</div>
		// 				))}
		// 			</view>
		// 		);
		// 	},
		// 	data() {
		// 		return {
		// 			// 组件的数据
		// 		};
		// 	},
		// 	methods: {
		// 		handleClick(item) {
		// 			console.log('组件按钮被点击了：' + item.name);
		// 		}
		// 	}
		// }
	// popop的原生信息
	...popup
}

/**
 * 自定义对话框 要求页面文件中有<CaDialog ref="dialog" width="400"/>
 * 对接文件：components/CaDialog.vue
 * @param {String} type 对话框类型。modal类型和actionSheet类型
 * @param {Object} data 对话框参数
 * 如果对话框相互嵌套，需先关闭原对话框后再打开新对话框，一般延迟500毫秒
 */
const customDialog = (type, data) => {
	const {custom = true} = data
	if (custom) { // 自定义对话框
		const self = core.router.getCurrentPageObj()
		if (self.$refs.dialog) {
			const refDialog = self.$refs.dialog
			const dialog = core.synctool.copy.all(dialogInfo)
			Object.keys(data).forEach(key => {
				if (key === 'excel') {
					data.excel && Object.keys(data.excel).forEach(k => {
						dialog.excel[k] = data.excel[k]
					})
				} else {
					dialog[key] = data[key]
				}
			})
			dialog.type = type
			if (!dialog.kind) {
				// 弹出方式
				dialog.kind = type === 'modal' ? 'center' : 'bottom'
			}
			if (dialog.showClose === '') {
				// 是否显示右上角关闭
				dialog.showClose = type === 'modal' ? false : false
			}
			if (dialog.showClose) {
				// 显示关闭按钮，一定可点mask
				dialog.isMaskClick = true
			}
			// 点击了自定义系统对话框的按钮
			dialog.clickDialog = (res) => {
				var callback
				if (dialog.awaitRes) {
					if (type === 'modal' && res === 0) {
						// modal的左侧（取消按钮）仍然直接关闭
						refDialog.close()
					} else {
						callback = () => {
							refDialog.close()
						}
					}
				} else {
					refDialog.close()
				}
				if (type === 'modal') {
					if (res === 'excel') {
						dialog.success({
							callback,
							excel: true, 
							content: dialog.content,
							modelValue: dialog.modelValue
						})
					} else if (res === 2) {
						dialog.success({
							callback,
							confirm: true, 
							content: dialog.content,
							modelValue: dialog.modelValue
						})
					} else if (res === 1) {
						dialog.success({
							callback,
							center: true, 
							content: dialog.content,
							modelValue: dialog.modelValue
						})
					} else {
						dialog.success({
							callback,
							cancel: true, 
							content: dialog.content,
							modelValue: dialog.modelValue
						})
					}
				} else {
					dialog.success({
						callback,
						tapIndex: res,
						cancel: res < 0,
						content: dialog.content,
						modelValue: dialog.modelValue
					})
				}
			}
			refDialog.open(dialog)
		} else {
			core.showToast('当前页面获取对话框错误')
		}
	} else { // 系统对话框
		if (type === 'modal') {
			uni.showModal(data)
		} else if (type === 'actionSheet') {
			uni.showActionSheet(data)
		}
	}
}

/**
 * 在关闭了一个之后，可以显示另一个
 */
module.exports = {
	// 自定义一般对话框
	showModal: (data) => {
		customDialog('modal', data)
	},
	// 自定义更多项单选对话框
	showActionSheet: (data) => {
		customDialog('actionSheet', data)
	}
}